<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax实例</title>

    <script>
        var xmlHttpRequest;  //定义一个变量用于存放XMLHttpRequest对象
        //定义一个用于创建XMLHttpRequest对象的函数
        function createXMLHttpRequest(){
            if(window.ActiveXObject){//IE浏览器的创建方式
                xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
            }else if(window.XMLHttpRequest){//Netscape浏览器中的创建方式
                xmlHttpRequest = new XMLHttpRequest();
            }
        }
        //响应HTTP请求状态变化的函数
        function httpStateChange(){
            if(xmlHttpRequest.readyState == 4){//判断异步调用是否成功,若成功开始局部更新数据
                if(xmlHttpRequest.status == 200||xmlHttpRequest.status == 0) {
                    var node = document.getElementById("myDIv");//查找节点
                    node.firstChild.nodeValue = xmlHttpRequest .responseText;//更新数据
                } else {//如果异步调用未成功,弹出警告框,并显示出错信息
                    alert("error:HTTP状态码为:"+xmlHttpRequest.status + ",HTTP状态信息为:" + xmlHttpRequest.statusText);
                }
            }
        }
        //异步调用服务器段数据
        function getData(name,value){
            createXMLHttpRequest();//创建XMLHttpRequest对象
            if(xmlHttpRequest!=null){
                xmlHttpRequest.open("get","ajax.text",true);//创建HTTP请求
                xmlHttpRequest.onreadystatechange = httpStateChange;//HTTP请求状态变化的函数
                xmlHttpRequest.send(null);//发送请求
            }
        }
    </script>
</head>
<body>
    <div id="myDiv">原数据</div>
    <input type = "button" value = "更新数据" onclick = "getData()">
</body>
</html>